<template>
  <div class="container">
    <div class="header">财富报告</div>
    <div class="image-section">
      <img src="./assets_page6/caishen.png" alt="财富通关图" />
      <h5>通过财富”通”关图，您可以清晰地看到财富在各个领域的分布，就像在四布上描绘出您的财务蓝图，它将帮助更轻松地量握来来的财务方向，确保每一步都隐健一踏实。</h5>
    </div>
    <div class="content">
      <!-- 新的格式替换部分 -->
      <div class="new-container">
        <div class="left">
          <div class="hidden-amount">
  <span v-if="assetHidden">******</span>
  <span v-else>{{ assetValue }}</span>
  <van-icon name="eye-o" class="icon" @click="toggleAsset" />
</div>

          <!-- <div class="report-link" @click="showModal('reportModal')">查看完整财富报告</div> -->
           <div>总资产</div>
        </div>
        <div class="right">
          <div>未登录</div>
          <div>
            <span class="assessment-link" @click="showModal('riskModal')">风险评估 &gt;</span>
          </div>
        </div>
      </div>
      <div class="chart-card">
        <div id="radar-chart" style="width: 100%; height: 100%;"></div>
      </div>
      <div class="report-link-container">
        <div class="report-link" @click="showModal('reportModal')">查看完整财富报告&gt;</div>
      </div>
    </div>
    
    <div class="footer">宁波银行</div>

    <!-- 模态框结构 -->
    <div v-if="riskModalVisible" class="modal" @click.self="closeModal('riskModal')">
      <div class="modal-content">
        <span class="close" @click="closeModal('riskModal')">&times;</span>
        <img src="./assets_page6/qupinggu.png" alt="风险评估" />
        <p>您尚未在我行进行风险评估</p>
        <button>继续浏览</button>
        <button>去评估</button>
      </div>
    </div>

    <div v-if="reportModalVisible" class="modal" @click.self="closeModal('reportModal')">
      <div class="modal-content">
        <span class="close" @click="closeModal('reportModal')">&times;</span>
        <img src="./assets_page6/bangding.png" alt="完整报告" />
        <p>您尚未绑定我行1类账户</p>
        <button>继续浏览</button>
        <button>去绑定</button>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data() {
    return {
      assetHidden: true,
      riskModalVisible: false,
      reportModalVisible: false,
      assetValue: '1000000' // 示例资产值
    };
  },
  methods: {
    toggleAsset() {
      this.assetHidden = !this.assetHidden;
    },
    showModal(type) {
      if (type === 'riskModal') {
        this.riskModalVisible = true;
      } else if (type === 'reportModal') {
        this.reportModalVisible = true;
      }
    },
    closeModal(type) {
      if (type === 'riskModal') {
        this.riskModalVisible = false;
      } else if (type === 'reportModal') {
        this.reportModalVisible = false;
      }
    },
    initChart() {
      // 初始化ECharts实例
      const chart = echarts.init(document.getElementById('radar-chart'));

      // 配置雷达图选项
      const option = {
        title: {
          text: '投资类型雷达图',
           textStyle: {
            color: '#333', // 标题颜色
            fontSize: 16,  // 标题字体大小
          }
        },
        tooltip: {},
        radar: {
          indicator: [
            { name: '活钱管理类', max: 100 },
            { name: '进取投资类', max: 100 },
            { name: '存款类', max: 100 },
            { name: '保障类', max: 100 },
            { name: '固定收益类', max: 100 }
          ],
          name: {
            textStyle: {
              color: '#000', // 字体颜色
              fontSize: 12,  // 字体大小
              fontWeight: 'normal', // 字体粗细
            }
          },
          // 轴线颜色
          axisLine: {
            lineStyle: {
              color: '#8E44AD', // 设置轴线的颜色
            }
          },
          // 分割线颜色
          splitLine: {
            lineStyle: {
              color: ['#3498DB', '#2980B9', '#1ABC9C', '#16A085', '#F39C12'] // 分割线的颜色
            }
          }
        },
        series: [{
          name: '类型分布',
          type: 'radar',
          data: [{
            value: [80, 70, 90, 60, 50],
            name: '投资类型'
          
        }],
        // 数据区颜色
        areaStyle: {
            color: 'rgba(52, 152, 219, 0.5)' // 设置雷达图中数据区域的颜色和透明度
          }
        }]
      };


      // 使用指定的配置项和数据绘制图表
      chart.setOption(option);
    }
  },
  mounted() {
    this.initChart();
  }
};
</script>

<style>
/* 全局字体样式 */
body {
  font-family: '宋体', '黑体', sans-serif; /* 设置字体类型 */
  font-size: 16px; /* 设置字体大小 */
}

/* 对应部分：整体样式 */
.container {
  max-width: 400px;
  margin: 0 auto;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.header {
  text-align: center;
  padding: 15px;
  font-size: 18px;
  font-weight: bold;
}
/* 对应部分：图片区域 */
.image-section {
  border: 1px solid #ccc; /* 边框 */
  border-radius: 10px;
  overflow: hidden;
  margin: 20px 0; /* 上下外边距 */
}
.image-section img {
  width: 100%;
  height: 200px; /* 高度可以调整 */
  object-fit: cover; /* 适配整个卡片 */
}
/* 对应部分：内容区域 */
.content {
  padding: 20px;
  background: linear-gradient(to bottom, #fff3e7, #faebeb); /* 从上到下的线性渐变 */
}
/* 新的格式样式 */
.new-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start; /* 顶部对齐 */
  background: linear-gradient(to bottom, #faf2e9, #fff3e7);
  padding: 10px;
  border: 1px solid #fff3e7;
}
.left, .right {
  display: flex;
  flex-direction: column; /* 垂直排列 */
  align-items: flex-start; /* 左对齐 */
}
.right {
  align-items: flex-end; /* 右对齐 */
}

.hidden-amount {
  display: inline-flex;
  align-items: center; /* 确保子元素在垂直方向上居中对齐 */
  font-size: 20px;
  margin-bottom: 5px; /* 增加下方间距 */
}

.icon {
  margin-left: 10px; /* 调整图标和文字之间的间距 */
  cursor: pointer;
}

.report-link {
  cursor: pointer;
  margin-top: 15px;
  margin-left: auto; /* 让按钮居右 */
  margin-right: 20px; /* 右侧间距 */
}

.assessment-link {
  margin-top: 5px;
  text-decoration: none;
  color: black;
  font-size: 14px;
  cursor: pointer;
}
/* 对应部分：雷达图卡片样式 */
.chart-card {
  /* border: 1px solid #ccc; */
  /* border-radius: 10px; */
  overflow: hidden;
  margin: 20px 0;
  padding: 20px;
  background-color: #fff3e7;
  /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
  height: 400px; /* 你可以根据需要调整高度 */
}
/* 对应部分：模态框样式 */
.modal {
  display: flex; /* 使用flex布局 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.modal-content {
  background-color: white;
  border-radius: 10px;
  width: 300px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.modal img {
  width: 100px;
  height: auto;
}
.right div {
  margin-bottom: 10px; /* 增加下方间距___未登录！！！ */
}


.footer {
  padding: 10px;
  text-align: center;
  color: #dfc6c6;
  font-size: 14px;
}
.close {
  cursor: pointer;
  float: right;
  font-size: 20px;
  margin-top: -10px;
}

/* 新增样式 */
.report-link-container {
  display: flex;
  justify-content: center; /* 居中对齐 */
  margin-top: -30px; /* 向上移动 */
}
</style>
